<template>
	<view v-show="!loading">
		<z-paging :fixed="true" ref="paging" v-model="dataList" @query="queryList">
			<view class="newword" v-if="dataList.length > 0">
				<view class="newword_top" v-for="(item1, index1) in dataList" :key="index1">
					<view class="newword_top_time">
						{{ $u.timeFormat(item1.time, 'yyyy-mm-dd') }}
					</view>
					<view class="newword_top_item d-b-c" v-for="(item2, index2) in item1.list" :key="index2" @tap="study(index1, index2)">
						<view class="d-s-c">
							<view class="">
								<u-checkbox @change="checkboxChange" v-model="item2.checked" shape="circle"></u-checkbox>
							</view>
							<view class="f30 fb">
								{{ item2.word }}
							</view>
						</view>
						<view class="" v-if="item2.click_num > 1">
							{{ item2.chinese }}
						</view>
					</view>
				</view>
				<view class="newword_bot d-b-c">
					<view class="d-s-c">
						<view class="">
							<u-checkbox v-model="isCheckAll" @change="checkedAll">全选</u-checkbox>
						</view>
					</view>
					<view class="d-s-c">
						<view class="d-c-c newword_bot_sc mr20" @tap="deleteWordsNote">
							<view class="">
								<u-icon name="trash" color="#ffffff" size="34"></u-icon>
							</view>
							<view class="ml10">
								删除
							</view>
						</view>
						<!-- <view class="d-c-c newword_bot_bj">
							<view class="">
								<u-icon name="edit-pen" color="#ffffff" size="34"></u-icon>
							</view>
							<view class="ml10">
								编辑
							</view>
						</view> -->
					</view>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgUrl: getApp().globalData.imgUrl,
				loading: true,
				dataList: [],
				isCheckAll: false,
				checkIds: "",
			}
		},
		onLoad() {
			if (!this.$store.state.isLogin) {
				uni.$u.toast('登录超时请重新登录')
				setTimeout(() => {
					uni.navigateTo({
						url: '/pages/login/login',
					});
				}, 2000)
				return false
			}
		},
		methods: {
			queryList(pageNo, pageSize) {
				this.$u.post(this.$u.api.wordNoteList, {
					pageNo: pageNo,
					pageSize: pageSize,
				}).then((res) => {
					if (res.code == 1) {
						this.$refs.paging.complete(res.data.data)
					} else {
						this.$refs.paging.complete(false)
					}
					this.loading = false
				}).catch((err) => {
					this.$refs.paging.complete(false)
					this.loading = false
				})
			},
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				// console.log(e);
			},
			// 全选
			checkedAll(e) {
				this.isCheckAll = e.value
				for (let i = 0; i < this.dataList.length; i++) {
					this.dataList[i].list.map(val => {
						val.checked = e.value
					})
				}
			},
			// 学习
			study(index1, index2) {
				let notes = this.dataList[index1].list[index2]
				console.log(notes)
				if (notes.click_num == 0) {
					notes.click_num = 1
					// 获取单词音频
					this.$u.post(this.$u.api.wordVoice, {
						word: notes.word,
						type: this.$store.state.voiceType
					}).then((res) => {
						this.utils.playAudio(this.imgUrl + res.data)
					}).catch((err) => {
						console.log(err)
						uni.$u.toast(err.data.msg)
					})
				} else if (notes.click_num == 1) {
					notes.click_num = 2
				} else {
					return false
				}
			},
			// 删除
			deleteWordsNote() {
				let ids = ''
				for (let i = 0; i < this.dataList.length; i++) {
					this.dataList[i].list.map(val => {
						if (val.checked) {
							ids += ids == '' ? val.id : ','+val.id
						}
					})
				}
				if (ids == '') {
					uni.$u.toast('请勾选需要删除的选项')
					return false
				}
				uni.showLoading({
					title: '正在删除...'
				})
				this.$u.post(this.$u.api.wordNoteDelete, {
					ids: ids
				}).then((res) => {
					uni.hideLoading()
					uni.$u.toast('删除成功')
					setTimeout(() => {
						this.getList()
					}, 1500)
				}).catch((err) => {
					uni.hideLoading()
					console.log(err)
					uni.$u.toast(err.data.msg)
				})
			},
		}
	}
</script>

<style scoped>
	.newword {
		padding: 30rpx 30rpx 300rpx;
	}

	.newword_top_time {
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
		margin-bottom: 30rpx;
	}

	.newword_top_item {
		width: 92%;
		background: #FFFFFF;
		border-radius: 20rpx;
		margin: 0 auto 20rpx;
		padding: 35rpx 40rpx 35rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		line-height: 44rpx;
	}

	.newword_bot {
		width: 750rpx;
		height: 12vh;
		background-color: #ffffff;
		padding: 0 54rpx;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.newword_bot_sc{
		width: 216rpx;
		height: 7vh;
		background: linear-gradient(90deg, #999999, #C8C4C4);
		border-radius: 40rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 7vh;
		color: #FFFFFF;
	}
	.newword_bot_bj{
		width: 216rpx;
		height: 7vh;
		background: linear-gradient(90deg, #1F93FF, #387BEF);
		border-radius: 40rpx;
		font-size: 30rpx;
		text-align: center;
		line-height: 7vh;
		color: #FFFFFF;
	}
</style>
